<template>
    <div class="update-birthday">
        <van-datetime-picker v-model="currentDate" type="date" title="选择年月日" :min-date="minDate" :max-date="maxDate"
            @cancel="onCancel" @confirm="onConfirm" />
    </div>
</template>

<script>
import dayjs from 'dayjs'
import { updateUserProfile } from '../../../api/user'

export default {
    name: 'UpdateBirthday',
    model: {
        prop: 'userBirthday',
        event: 'changeBirthday'
    },
    props: {
        userBirthday: {
            type: String,
            required: true
        }
    },
    data() {
        return {
            minDate: new Date(1970, 0, 1),
            maxDate: new Date(),
            currentDate: new Date(this.userBirthday),
        }
    },
    methods: {
        onCancel() {
            this.$emit('close')
        },
        async onConfirm() {
            this.$toast.loading({
                message: '加载中...',
                forbidClick: true,
                duration: 0
            });
            try {
                await updateUserProfile({
                    birthday: dayjs(this.currentDate).format('YYYY-MM-DD')
                })
                this.$emit('close')
                this.$emit('changeBirthday', dayjs(this.currentDate).format('YYYY-MM-DD'))
                this.$toast.success('更新生日成功')
            } catch (err) {
                console.log('修改用户信息失败', err);
                this.$toast.fail('更新生日失败')
            }
        }
    }
}
</script>

<style>
</style>